<template>
    <div class="page">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home', name: '' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/goods', name: '' }">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/goods', name: '' }">商品添加</el-breadcrumb-item>
        </el-breadcrumb>

            
        
        


        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
                <span>添加商品</span>
            </div>
            <el-row type="flex" justify="center">
              <el-col :span="15">
                <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
                    <el-form-item label="商品名称">
                        <el-input type="textarea" rows="4" v-model="form.goods_title"></el-input>
                    </el-form-item>

                    <el-form-item label="商品描述">
                        <el-input type="textarea" v-model="form.goods_des"></el-input>
                    </el-form-item>

                    <el-form-item label="商品产地">
                        <el-input type="textarea" v-model="form.place"></el-input>
                    </el-form-item>

                    <el-form-item label="商品单价">
                        <el-row :gutter="12">
                          <el-col :span="10">
                            <el-input type="price" v-model="form.unit_price"></el-input>
                          </el-col>
                           <el-col :span="1">
                              <span>元</span>
                          </el-col>
                        </el-row>
                    </el-form-item>


                    <el-form-item label="商品库存">
                        <el-row :gutter="12">
                          <el-col :span="10">
                            <el-input type="price" v-model="form.stock"></el-input>
                          </el-col>
                          <el-col :span="1">
                              <span>件</span>
                          </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item label="封面图">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-input v-model="banner_img01"></el-input>
                                <el-input v-model="banner_img02"></el-input>
                                <el-input v-model="banner_img03"></el-input>
                            </el-col>
                            <el-col :span="10" :offset="0">
                                <el-carousel trigger="click" height="150px" arrow="never">
                                    <el-carousel-item v-for="(item,idx) in banner_imgs" :key="idx">
                                        <div>
                                            <el-image style="height:150px" :src="item"></el-image>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </el-col>

                        </el-row>

                    </el-form-item>

                    <el-form-item label="详情图">
                       <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-input v-model="form.imgs"></el-input>
                                <el-input v-model="form.imgs"></el-input>
                                <el-input v-model="form.imgs"></el-input>
                                <el-input v-model="form.imgs"></el-input>
                            </el-col>

                            <el-col :span="10" :offset="0">
                                <el-carousel trigger="click" height="410px" direction="vertical">
                                    <el-carousel-item v-for="item in 3" :key="item">
                                        <el-image style="height:450px" src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200927-115103-39de.png?x-oss-process=image/resize,w_563/interlace,1,image/format,webp"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </el-col>

                        </el-row>
                       
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" size="medium" @click="submitBtnClick">提交</el-button>
                    </el-form-item>

                    


                </el-form>
            
              </el-col>
            </el-row>


        
        </el-card>


    </div>
</template>

<script>
    export default {
        mounted(){

        },
        data(){
            return {
                form:{
                    stock:0,
                    unit_price:0.00
                    },
                
                banner_imgs:[],
                banner_img01:"",
                banner_img02:"",
                banner_img03:"",
                detail_imgs:[]
            }
        },
        methods:{
            // action
            submitBtnClick() {
                this.netAddGoods()
            },


            bannerOnChange(tag,src) {

            },



            // net
            async netAddGoods() {
                let self = this
                let {data} = await this.$http.post("/goods/add",this.form)
                let code = data.code;
                if(code == 0) {
                    self.$message.success(data.msg)
                    setTimeout(() => {
                        self.$router.back()
                    }, 2000);
                } else {
                    self.$message.error(data.msg)
                }
            }
        },
    }
</script>


<style scoped>
</style>